<template>
  <!-- 认证审核 -->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item prop="realName">
        <el-input v-model="queryParams.realName" placeholder="请输入真实姓名" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card class="box-card">
      <el-radio-group v-model="orderStatus" size="mini" @input="checkedStatus">
        <el-radio-button label="">所有</el-radio-button>
        <el-radio-button :label="1">待审核</el-radio-button>
        <el-radio-button :label="2">审核通过</el-radio-button>
        <el-radio-button :label="3">审核拒绝</el-radio-button>
      </el-radio-group>
      <el-table v-loading="loading" border :data="dataList">
        <el-table-column label="用户Id" align="center" prop="userId" />
        <el-table-column label="用户名/单位名" align="center" prop="nickName" />
        <el-table-column label="真实姓名" align="center" prop="realName" />
        <el-table-column label="身份证号码/统一信用代码" align="center" prop="number" />
        <el-table-column label="审核状体" align="center" prop="status">
          <template slot-scope="scope">
            <span>{{ scope.row.status | ctAuthentication }}</span>
          </template>
        </el-table-column>
        <el-table-column label="认证类型" align="center" prop="type">
          <template slot-scope="scope">
            <span>{{ scope.row.type | ctAuthenticationType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="toExamine(scope.row)" v-if="scope.row.status == 1">
              通过
            </el-button>
            <el-button size="mini" type="text" @click="toRefuse(scope.row)" v-if="scope.row.status == 1">
              拒绝
            </el-button>
            <el-button size="mini" type="text" @click="handleView(scope.row)">
              查看
            </el-button>
            <!-- <el-button size="mini" type="text" @click="delAuthentication(scope.row)">
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 拒绝 -->
    <el-dialog title="拒绝" :visible.sync="isRefuse" width="50%" :close-on-click-modal="false">
      <el-form ref="refuseForm" :model="refuseForm" label-width="100px" :rules="rules">
        <el-form-item label="拒绝理由" prop="remake">
          <el-input v-model="refuseForm.remake"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="isRefuse = false">取 消</el-button>
        <el-button @click="doRefuse">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="detailShow" width="50%" :close-on-click-modal="false">
      <el-form :model="detailRow" label-width="100px">
        <!-- 企业认证 -->
        <el-form-item label="认证类型">{{ detailRow.type | ctAuthenticationType }}认证</el-form-item>
        <el-form-item :label="detailRow.type == 1 ? '姓名' : '真实姓名'">{{ detailRow.realName || '-' }}</el-form-item>
        <el-form-item :label="detailRow.type == 1 ? '昵称' : '单位名称'">{{ detailRow.nickName || '-' }}</el-form-item>
        <el-form-item :label="detailRow.type == 1 ? '身份证号码' : '统一信用代码'"> {{ detailRow.number || '-' }} </el-form-item>
        <el-form-item label="通讯地址" v-if="detailRow.type != 1">{{ detailRow.address || '-' }}</el-form-item>
        <el-form-item :label="detailRow.type == 1 ? '身份证照片' : '营业执照'">
          <img :src="baseUrl + img" alt="" v-for="img in detailRow.certificatePath" :key="img" width="100px" height="100px"
            style="margin-right: 20px;">
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="detailShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { authenticationAudits, authenticationList, delAuthenticationAudits } from "@/api/auditsManagement/authentication";

export default {
  data() {
    return {
      loading: false, // 遮罩层
      orderStatus: '', //审核状态
      total: 0, // 总条数
      dataList: [], // 费用中心表格数据
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        realName: null, //关键字查询
      },
      detailShow: false, // 详情弹窗
      detailRow: {}, // 详情内容
      isRefuse: false,//拒绝弹框
      refuseForm: {},//拒绝表单
      rules: {
        remake: [{ required: true, message: "拒绝理由不能为空", trigger: "blur" }]
      },
      baseUrl: process.env.VUE_APP_BASE_API ,//图片基础路径
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**删除 */
    // delAuthentication(row) {
    //   this.$confirm(`确定要删除该审核吗?`, '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     delAuthenticationAudits([row.id]).then(res => {
    //       if (200 === res.code) {
    //         this.getList();
    //         this.$message.success(`删除成功`);
    //       }
    //     })
    //   }).catch(() => {
    //   });
    // },
    /**拒绝审核 */
    doRefuse() {
      this.$refs.refuseForm.validate(valid => {
        if (valid) {
          this.refuseForm.status = 3;
          authenticationAudits(this.refuseForm).then(res => {
            if (200 == res.code) {
              this.getList();
              this.isRefuse = false;
              this.$message.success('拒绝成功！')
            }
          })
        }
      })
    },
    /**审核拒绝对话框 */
    toRefuse(e) {
      this.refuseForm.remake = null;
      this.isRefuse = true;
      this.refuseForm = e;
    },
    /**认证审核通过 */
    toExamine(obj) {
      this.$confirm(`确定要通过审核吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        obj.status = 2;
        authenticationAudits(obj).then(res => {
          if (200 === res.code) {
            this.getList();
            this.$message.success(`通过成功`);
          }
        })
      }).catch(() => {
      });
    },
    /**修改选中的服务器状态 */
    checkedStatus(e) {
      this.orderStatus = e;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询数据列表 */
    getList() {
      let data = {
        status: this.orderStatus,
        shoppingCarEnums: "CLOUD_MARKET",
        realName: this.queryParams.realName,
        params: {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
        },
      };
      this.loading = true;
      authenticationList(data)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },
    // 查看详情
    handleView(row) {
      this.detailRow = Object.assign({}, row);
      this.detailShow = true;
      this.detailRow.certificatePath = this.detailRow.certificatePath?.split(',');
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;

  >div {
    flex: 1;
  }
}
</style>
